﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="../AmazeUI-2.4.2/assets/css/amazeui.css"/>
    <link href="../css/dlstyle.css" rel="stylesheet" type="text/css">
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script src="../HT/assets/layer/layer.js" type="text/javascript"></script>
    <style type="text/css">
        input {
            border: 0;
            outline: none;
        }
    </style>
</head>

<body>

<div class="login-boxtitle">
    <a href="home.html"><img alt="logo" src="../images/logobig.png"/></a>
</div>

<div class="login-banner">
    <div class="login-main">
        <div class="login-banner-bg">
            <span></span><img src="../images/big.jpg"/>
        </div>
        <div class="login-box">

            <h3 class="title">登录商城</h3>

            <div class="clear"></div>

            <div class="login-form">
                <form>
                    <div class="user-name">
                        <label for="user"><i class="am-icon-user" style="margin-top: 13px"></i></label> <input
                            type="text" name="" id="user" placeholder="邮箱/手机/用户名">
                    </div>
                    <hr>
                    <div class="user-pass" style="margin-top: 13px">
                        <label for="password"><i class="am-icon-lock" style="margin-top: 13px"></i></label> <input
                            type="password" name="" id="password" placeholder="请输入密码">
                    </div>
                    <hr>
                    <div class="verification">
                        <label for="code"><i class="am-icon-code-fork" style="margin-top: 12px"></i></label>
                        <input
                                type="tel" name="" id="code" placeholder="请输入验证码"> <a
                            class="btn" href="javascript:void(0);"
                            id="sendMobileCode">
                        <img style="position: absolute;right: 0px;bottom: 0px;width: 130px; height: 40px;"
                             src="http://localhost:8080/SnacksShop/user.do?type=code" id="codeImg" alt="验证码未加载">
                    </a>
                    </div>
                </form>
            </div>

            <div class="login-links">
                <label for="remember-me">
                    <input id="remember-me" type="checkbox">记住密码</label>
                <a href="findPassword.html" class="am-fr" style="color: #0000ff">忘记密码?</a>
            </div>
            <div class="am-cf">
                <input onclick="javascript:login()" name="" value="登 录"
                       class="am-btn am-btn-primary am-btn-sm" style="background-color: red ; border: 0;
            outline: none;">
            </div>
            <div>
                <a href="register.html" class="am-fr" style="color: #2727a3">没有账号注册</a>
            </div>
            <br>
            <div class="partner">
                <h3>合作账号</h3>
                <br>
                <div class="am-btn-group">
                    <li><a href="#"><i class="am-icon-qq am-icon-sm"></i><span>QQ登录</span></a></li>
                    <li><a href="#"><i class="am-icon-weibo am-icon-sm"></i><span>微博登录</span>
                    </a></li>
                    <li><a href="#"><i class="am-icon-weixin am-icon-sm"></i><span>微信登录</span>
                    </a></li>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="footer ">
    <div class="footer-hd ">
        <p>

            <b>|</b> <a href="# ">商城首页</a> <b>|</b> <a href="# ">支付宝</a> <b>|</b>
            <a href="# ">物流</a>
        </p>
    </div>
    <div class="footer-bd ">
        <p style="text-align: center;">
            <a href="# ">合作伙伴</a> <a href="# ">联系我们</a> <a href="# ">网站地图</a> <em>©
            2015-2025 zking 版权所有</em>
        </p>
    </div>
</div>


</body>

<script>

    //验证用户名是否存在
    $("#user").blur(
        function () {
        if ($("#user").val() == "" || $("#user").val() == null)
            return;
        $.ajax({
            url: "http://localhost:8080/SnacksShop/user.do?type=existUserName",
            data: {
                userName: $("#user").val()
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success: function (data) {
                if (data == "false") {
                    layer.msg('用户名不存在!', {icon: 1, time: 1500});
                    $("#user").val("");
                }
            },
            error: function (data) {
                layer.msg('请检查你的网络!', {icon: 1, time: 1500});
            }
        })
    }
    )
    //获取浏览器唯一标识
    var llqTemp = cans();

        // 判断是否记住登录
            $.ajax({
                url: "http://localhost:8080/SnacksShop/user.do?type=getTempMe",
                data: {
                    temp: llqTemp
                },
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                type: "post",
                success: function (data) {
                    data = JSON.parse(data);
                    if(data.data!="null"){
                        $("#user").val(data.data.userName);
                        $("#password").val(data.data.userPass);
                        $("#remember-me").prop("checked","checked")
                    }
                },
                error: function (data) {
                    layer.msg('请检查你的网络!', {icon: 1, time: 1500});
                }
            })



    //记住密码

    function login() {
        var userName = $("#user").val();
        var passWord = $("#password").val();
        var code = $("#code").val();
        if (userName == "" || userName == null) {
            layer.msg('用户名不能为空!', {icon: 1, time: 1500});
            return;
        }
        if (passWord == "" || passWord == null) {
            layer.msg('密码不能为空!', {icon: 1, time: 1500});
            return;
        }
        if (code == "" || code == null) {
            layer.msg('验证码不能为空!', {icon: 1, time: 1500});
            return;
        }
        $.ajax({
            url: "http://localhost:8080/SnacksShop/user.do?type=userLogin",
            data: {
                userName: userName,
                passWord: passWord,
                code: code
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success: function (data) {
                if (data == "codeError") {
                    layer.msg('验证码错误!', {icon: 1, time: 1500});
                    $("#code").val("");
                    document.getElementById("codeImg").setAttribute("src", "http://localhost:8080/SnacksShop/user.do?type=code&" + new Date().getTime());
                }
                if(data == "userError"){
                    layer.msg("用户名或密码错误",{icon: 1, time: 1500});
                    $("#code").val("");
                    $("#password").val("");
                    document.getElementById("codeImg").setAttribute("src", "http://localhost:8080/SnacksShop/user.do?type=code&" + new Date().getTime());
                }
                if(data=="true"){
                    layer.msg("登录成功",{icon: 1, time: 1500});
                    //是否勾选记住密码
                    if($("#remember-me").prop("checked") ){
                        remeberMe(llqTemp);
                    }
                    location.href="./home.html";
                }
            },
            error: function (data) {
                layer.msg('请检查你的网络!', {icon: 1, time: 1500});
            }
        })

    }

    function remeberMe(temp){
        $.ajax({
            url: "http://localhost:8080/SnacksShop/user.do?type=rememberMe",
            data: {
                temp: temp
            },
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            success: function (data) {
            },
            error: function (data) {
                layer.msg('请检查你的网络!', {icon: 1, time: 1500});
            }
        })
    }


    //验证码刷新
    $("#codeImg").click("click", function () {
        // $("#codeImg").src = "http://localhost:8080/SnacksShop/user.do?type=code&"+new Date().getTime();
        document.getElementById("codeImg").setAttribute("src", "http://localhost:8080/SnacksShop/user.do?type=code&" + new Date().getTime());
    })

    function cans() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var txt = 'http://security.tencent.com/';
        ctx.textBaseline = "top";
        ctx.font = "14px 'Arial'";
        ctx.textBaseline = "tencent";
        ctx.fillStyle = "#f60";
        ctx.fillRect(125, 1, 62, 20);
        ctx.fillStyle = "#069";
        ctx.fillText(txt, 2, 15);
        ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
        ctx.fillText(txt, 4, 17);

        var b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
        var bin = atob(b64);
        var crc = bin2hex(bin.slice(-16, -12));
        //var crc = bin.slice(-16,-12);
        // alert(crc);
        return crc;
    }




    function bin2hex(str) {
        var result = "";
        for (i = 0; i < str.length; i++) {
            result += int16_to_hex(str.charCodeAt(i));
        }
        return result;
    }

    function int16_to_hex(i) {
        var result = i.toString(16);
        var j = 0;
        while (j + result.length < 4) {
            result = "0" + result;
            j++;
        }
        return result;
    }

</script>
</html>